<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>浮动与定位</title>
		<link rel="stylesheet" href="css/box.css"/>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 230px;
				border: 1px solid black;
				font-size: 36px;
				text-align: center;
				float: left;
			}
			.qc{
				clear: both;
			}
			/* 3.添加after伪元素 */
			.clearfix::after/* after:在什么之后 */{
				content:"";/* 内容为空 */
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			/* 4.添加双伪元素 */
			.clearfix::after,.clearfix::before{
				content: "";
				display: table;
			}
			.clearfix::after{
				clear: both;
			}
		</style>
	</head>
	<body>
		<!-- 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列用浮动
		传统的网页布局：标准流+浮动+定位
		标准流：标签的显示规则（显示模式）
		浮动：让块级合盒子在一行内显示
		定位：实现标签精准定位 -->
		<!-- 浮动float：
			1.浮动的盒子会脱离标准流（脱标）
				清除浮动的方法：
				1.额外标签法（隔墙法）
				2.父级添加overflow：hidden属性(超出部分隐藏)
				3.父级添加after伪标签
				4.父级添加双伪元素
		 -->
		 <div class="clearfix">
			<div class="box">
				1
			</div>
			<div class="box" style="height: 170px;">
				2
			</div>
			<div class="box" style="height: 251px;">
				3
			</div>
		 </div>
		
		<p class="qc"></p><!-- 隔墙法，会成为冗余代码 -->
		
	</body>
</html>
